//银行卡详情弹窗

import React, { useState } from 'react';
import { Form, Radio } from 'antd';
import CommonModal from '@/components/CommonModal';
import ChangShuBindCard from './ChangShuBindCard';

const layout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 12,
  },
};

const BindTypeSelect = ({ accountNo, handleOk, handleCancel }) => {

  const [form] = Form.useForm();

  const [visible, setVisible] = useState(false);

  const onOK = () =>{
    form.validateFields().then(res=>{
      setVisible(res.type);
    })
  }

  const changShuBindCardProps = {
    accountNo,
    visible,
    handleOk,
    handleCancel(){
      setVisible(false);
    }
  }

  return (<CommonModal
    visible={true}
    title='绑定选择'
    onOk={onOK}
    onCancel={handleCancel}
    minHeight={120}
  >
    <Form {...layout} name="selectBindType" form={form} initialValues={{type:'1'}}>
      <Form.Item label="绑定类型" name="type" rules={[{required: true,  message: '请选择绑定类型'}]}>
        <Radio.Group>
          <Radio value="1"> 绑定银行卡</Radio>
          <Radio value="3"> 绑定支付宝</Radio>
        </Radio.Group>
      </Form.Item>
    </Form>
    { visible && <ChangShuBindCard {...changShuBindCardProps} />}
  </CommonModal>)
}

export default BindTypeSelect;